@charset "UTF-8";
* {margin: 0;padding: 0;}
html {
	height: 100%;
}
body {
	min-width: 320px;
	height: 100%;
	overflow-x: hidden;
	font-family: Verdana;
}

header {
	position: fixed;
	z-index: 2;
	top: 0;
	width: 100%;
	height: 44px;
	line-height: 44px;
	background-color: #3e74b9;	
	text-align: center;
	color: #FFF;	
}

section {
	height: 100%;
}

footer {
	position: fixed;
	z-index: 3;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: rgba(0,0,0,.6);	
	text-align: center;
	color: #FFF;
}

.view-container {	
	height: 100%;
}

.page-container {
	position: relative;
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	background-color: #F8F8F8;
}

.page-num {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	font-size: 72px; 
}

#pageB {
	background-color: #ECB43A;
}

@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(50%);opacity:0}}
@-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
@-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(-50%);opacity:0}}
@-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}

.slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;}
.slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;}
.sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;}
.sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;}
.animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
.animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;background-color:#f5f5f5}